<template>
  <div>
    <!--订单列表 -->
    <!-- 全部按钮 -->
    <el-row>
      <el-col :span="24">
        <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">
          <el-radio-button label="all">全部</el-radio-button>
          <el-radio-button label="obligation">待付款</el-radio-button>
          <el-radio-button label="pending">待发货</el-radio-button>
          <el-radio-button label="wait">待收货</el-radio-button>
          <el-radio-button label="done">已完成</el-radio-button>
          <el-radio-button label="closed">已关闭</el-radio-button>
        </el-radio-group>
      </el-col>
    </el-row>

    <el-row :gutter="10">
      <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="3">
        <div class="grid-content bg-purple">
          <span style="color:#8492a6; ">订单号</span>
          <el-input
            style="margin-top:5px "
            v-model="Order_Num"
            placeholder="订单号"
          ></el-input>
        </div>
      </el-col>
      <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="3"
        ><div class="grid-content bg-purple">
          <span style="color:#8492a6; ">用户名</span>
          <el-input
            style="margin-top:5px "
            v-model="User_Name"
            placeholder="用户名"
          ></el-input></div
      ></el-col>
      <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="3"
        ><div class="grid-content bg-purple">
          <span style="color:#8492a6; ">订单类型</span>
          <el-select
            style="margin-top:5px "
            v-model="Order_Type"
            placeholder="请选择"
          >
            <el-option
              v-for="item in Order_From"
              :key="item.Time_Value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select></div
      ></el-col>
      <el-col
        :xs="8"
        :sm="8"
        :md="6"
        :lg="6"
        :xl="6"
        style="min-width:420px;margin-right:-5px;"
        ><div class="grid-content bg-purple">
          <el-date-picker
            style="margin-top:24px "
            v-model="Time_Value"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker></div
      ></el-col>
      <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2" style="margin-left:-5px;"
        ><div class="grid-content bg-purple">
          <el-button
            style="margin-top:23px "
            type="primary"
            icon="el-icon-search"
            >搜索</el-button
          >
        </div></el-col
      >
    </el-row>

    <el-row :gutter="10" style="margin-top:10px">
      <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2" style="padding-right:0px"
        ><div class="grid-content bg-purple">
          <el-dropdown @command="Order_Export">
            <el-button type="primary">
              导出订单<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="all">导出所有</el-dropdown-item>
              <el-dropdown-item command="Pitch">导出选中</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div></el-col
      >
      <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2" style="padding-left:0px"
        ><div class="grid-content bg-purple">
          <el-button type="primary" icon="el-icon-printer">批量打印</el-button>
        </div></el-col
      >
    </el-row>

    <el-table
      border
      ref="multipleTable"
      :data="Order_tableData"
      tooltip-effect="dark"
      style="width: 100% ; margin:10px 0"
      @selection-change="Order_tableData_Change"
    >
      <el-table-column type="selection" width="55" align="center">
      </el-table-column>
      <el-table-column prop="name" label="订单号" width="120">
      </el-table-column>
      <el-table-column prop="name" label="卖家" width="120"> </el-table-column>
      <el-table-column prop="name" label="下单时间" width="120">
      </el-table-column>
      <el-table-column prop="name" label="订单类型" width="120">
      </el-table-column>
      <el-table-column prop="name" label="订单总额" width="120">
      </el-table-column>
      <el-table-column prop="date" label="订单状态" width="100">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.date === 0" type="warning">待付款 </el-tag>
          <el-tag v-else-if="scope.row.date === 1" type="info">已关闭</el-tag>
          <el-tag v-else-if="scope.row.date === 2" type="warning"
            >待发货</el-tag
          >
        </template>
      </el-table-column>

      <el-table-column prop="address" label="PC" show-overflow-tooltip>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="success"
            size="mini"
            @click="Order_tableData_Particulars(scope.$index, scope.row)"
            >详情</el-button
          >
          <el-button
            v-if="scope.row.date == 0 ? true : false"
            type="danger"
            size="mini"
            @click="Order_tableData_Cancel(scope.$index, scope.row)"
            >取消</el-button
          >
          <el-button
            v-if="scope.row.date == 2 ? true : false"
            type="primary"
            size="mini"
            @click="Order_tableData_Deliver(scope.$index, scope.row)"
            >发货</el-button
          >
        </template>
      </el-table-column>

      <!-- 点击发货隐藏框 -->
    </el-table>

    <el-dialog title="发货" :visible.sync="Order_tableData_FormVisible">
      <el-form
        :model="Order_tableData_Deliver_form"
        :rules="Order_tableData_Deliver_rules"
        ref="Order_tableData_Deliver_form"
      >
        <el-form-item label="物流公司" label-width="120px" prop="Company">
          <el-select
            v-model="Order_tableData_Deliver_form.Company"
            placeholder="请选择物流公司"
            style="width: 100%;"
          >
            <el-option
              v-for="item in Logistics_Company"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动名称" label-width="120px" prop="Order">
          <el-input
            v-model="Order_tableData_Deliver_form.Order"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="Order_tableData_FormVisible = false"
          >取 消</el-button
        >
        <el-button
          type="primary"
          @click="Order_tableData_submitForm('Order_tableData_Deliver_form')"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <!-- 分页 -->

    <el-pagination
      @size-change="Order_SizeChange"
      @current-change="Order_CurrentChange"
      :current-page="currentPage"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "",
  props: [""],

  data() {
    return {
      tabPosition: "all",
      // 订单号
      Order_Num: "",
      // 用户名
      User_Name: "",
      // 订单数据
      Order_From: [
        {
          value: "选项1",
          label: "全部",
        },
        {
          value: "选项2",
          label: "普通订单",
        },
        {
          value: "选项3",
          label: "定金预售",
        },
        {
          value: "选项4",
          label: "全部预售",
        },
        {
          value: "选项5",
          label: "虚拟商品订单",
        },
      ],
      // 订单类型数据
      Order_Type: "",
      // 时间
      Time_Value: "",

      // 表单数据
      Order_tableData: [
        {
          date: 0,
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: 1,
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: 2,
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],

      // 表单勾选的内容
      Order_tableData_list: [],
      // 点击发货隐藏框
      Order_tableData_FormVisible: false,
      // 点击发货隐藏框表单数据
      Order_tableData_Deliver_form: {
        Order: "",
        Company: "",
      },
      // 表单校验规则
      Order_tableData_Deliver_rules: {
        Company: [
          { required: true, message: "请选择物流公司", trigger: "change" },
        ],
        Order: [
          { required: true, message: "请输入运单号", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
      },
      // 物流公司
      Logistics_Company: [
        {
          id: 1,
          label: "顺丰快递",
          value: "顺丰快递",
        },
        {
          id: 2,
          label: "韵达快运",
          value: "韵达快运",
        },
        {
          id: 3,
          label: "中速快件",
          value: "中速快件",
        },
        {
          id: 4,
          label: "远程物流",
          value: "远程物流",
        },
        {
          id: 5,
          label: "百世汇通",
          value: "百世汇通",
        },
      ],
      // 显示当前分页页数
      currentPage: 1,
    };
  },

  components: {},

  computed: {},

  beforeMount() {},

  mounted() {},

  methods: {
    // 导出订单、
    Order_Export(command) {
      console.log(command);
    },
    // 选中单选框数据
    Order_tableData_Change(val) {
      this.Order_tableData_list = val;
    },
    // 点击表单中详情按钮
    Order_tableData_Particulars(index, row) {
      //  console.log(index, row);
      // this.$router.push({path:'/home',query: {id:'1'}})
      this.$router.push({
        path: `/orderDetails/${1}`,
      });
    },
    // 点击表单中的取消按钮
    Order_tableData_Cancel(index, row) {
      console.log(index, row);
      this.$confirm("订单不能随意中断，你确定要修改吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 点击表单中的发货按钮
    Order_tableData_Deliver(index, row) {
      console.log(index, row);
      this.Order_tableData_FormVisible = true;
    },
    // 点击发货时候的提交按钮
    Order_tableData_submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
          this.Order_tableData_FormVisible = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    // 分页
    Order_SizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    Order_CurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },

  watch: {},
};
</script>
<style lang="" scoped></style>
